<template>
  <UiAffix :offset-top="offsetTop" :offset-bottom="offsetBottom" :target="target" @change="handleChange">
    <div class="gw-toolbar" :class="{ fixed }">
      <slot />
    </div>
  </UiAffix>
</template>

<script>
export default {
  name: 'GwToolbar',
  props: {
    offsetTop: {
      type: Number
    },
    offsetBottom: {
      type: Number
    },
    target: {
      type: String,
      default: '.layout-body .el-scrollbar__wrap'
    }
  },
  data() {
    return {
      fixed: false
    }
  },
  methods: {
    handleChange(fixed) {
      this.fixed = fixed
    }
  }
}
</script>

<style lang="scss">
@import "~@style";
.gw-toolbar {
  padding: $space * 0.66;
  background-color: #fafafa;
  border-radius: 1em;

  &.fixed {
    background-color: $white;
    border: 1px solid $ui-border-color;
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 2px 12px $ui-border-color;
  }

  .ui-dark-mode & {
    background-color: #1a1a1d;

    &.fixed {
      border-color: $ui-border-color-reverse;
      border-top-color: transparent;
      box-shadow: 0 2px 12px $ui-border-color-reverse;
    }
  }
}
</style>
